import { Popconfirm, Image, InputNumber, Button } from 'antd';
import { ColumnsType } from 'antd/es/table';

import commonService from '@/api/services/commonService';

export const renderColumn = (refetch: Function, doDel: Function): ColumnsType => {
  const handleNum = (e: number, row: any) => {
    commonService.getCustomApi('/member/cart/update', { cartId: row.id, num: e });
    setTimeout(() => {
      refetch();
    }, 500);
  };
  return [
    {
      title: '商品信息',
      dataIndex: 'goodsName',
      align: 'center',
      width: 200,
      render: (_, row) => {
        const thumbs = JSON.parse(row.thumbs || '[]');
        return (
          <div className="relative flex gap-[10px]">
            {thumbs?.map((item: any, index: number) => (
              <div className="h-[120px] w-[120px]" key={index}>
                <Image alt={row.goodsName} src={item} />
              </div>
            ))}
            {/* {thumbs.length > 0 ? (
              <div className="absolute left-0 top-0 bg-[#FD7901] p-[4px] text-[14px] text-[#ffffff]">
                两面
              </div>
            ) : (
              ''
            )} */}
            <div className="flex flex-col gap-[5px] text-left text-[#686B73]">
              <div className="mb-[5px] font-bold text-[#222222]">{row.goodsName}</div>
              <div>编码：{row.fpId}</div>
              <div>颜色：{row.color}</div>
              <div>尺码：{row.size}</div>
            </div>
          </div>
        );
      },
    },
    {
      title: '单价',
      dataIndex: 'price',
      align: 'center',
      width: 60,
      render: (val) => <div>{(val / 100).toFixed(2)}</div>,
    },
    {
      title: '数量',
      dataIndex: 'number',
      align: 'center',
      width: 60,
      render: (val, row) => <InputNumber min={1} value={val} onChange={(e) => handleNum(e, row)} />,
    },
    {
      title: '小计',
      dataIndex: 'totalPrice',
      align: 'center',
      width: 60,
      render: (val) => <div>{(val / 100).toFixed(2)}</div>,
    },
    {
      title: '操作',
      key: 'operation',
      align: 'center',
      width: 100,
      render: (_, record) => (
        <div className="flex w-full justify-center text-gray">
          <Popconfirm
            title="确认删除该数据？"
            okText="确定"
            cancelText="取消"
            placement="left"
            onConfirm={() => doDel(record.id)}
          >
            <Button className="w-[82px]" type="primary" ghost danger>
              删除
            </Button>
          </Popconfirm>
        </div>
      ),
    },
  ];
};
